<template>
  <div>
    <header>
      <p><span>退款申请</span></p>
      <button class="btnNews">刷新</button>
    </header>
    <div class="connect">
      <div>退款申请详情</div>
      <div>
        <table>
          <tr>
            <td class="text">订单编号</td>
            <td class="content">
              <span>{{ this.dataForm.orderNumber }}</span>
            </td>
          </tr>
          <tr>
            <td class="text">申请状态</td>
            <td class="content" v-if="1 == this.dataForm.refundSts"><span>待处理</span></td>
            <td class="content" v-if="2 == this.dataForm.refundSts"><span>同意</span></td>
            <td class="content" v-if="3 == this.dataForm.refundSts"><span>不同意</span></td>
          </tr>
          <tr>
            <td class="text">申请时间</td>
            <td class="content">
              <span>{{ this.dataForm.applyTime }}</span>
            </td>
          </tr>
          <tr>
            <td class="text">用户账号</td>
            <td class="content">
              <span>{{ this.dataForm.userId }}</span>
            </td>
          </tr>
        </table>
        <table>
          <tr>
            <td class="text">订单金额</td>
            <td class="content">
              <span>{{ this.dataForm.orderAmount }}</span>
            </td>
          </tr>
          <tr>
            <td class="text">确认金额</td>
            <td class="content">
              <span>{{ this.dataForm.refundAmount }}</span>
            </td>
          </tr>
          <tr>
            <td class="text">退款方式</td>
            <td class="content"><span>{{ whoPay }}</span></td>
          </tr>
          <tr>
            <td class="text">售后类型</td>
            <td class="content"><span>{{whatType}}</span></td>
          </tr>
          <tr>
            <td class="text">申请原因</td>
            <td class="content"><span>{{ this.dataForm.buyerMsg }}</span></td>
          </tr>
          <tr>
            <td class="text">处理意见</td>
            <td class="content"><span>{{this.dataForm.handlingOpinions}}</span></td>
          </tr>
        </table>
        <template v-if="1 == this.$route.params.state">
          <table>
            <tr>
              <td class="text"><span>处理备注</span></td>
              <td class="content">
                <el-input v-model="input1" ref="input1"></el-input>
              </td>
            </tr>
          </table>
          <div class="divBtn">
            <el-row>
              <el-button type="primary" @click="ConfirmRefund"
                >确认退款</el-button
              >
              <el-button type="danger" @click="refuseRefund"
                >拒绝退款</el-button
              >
            </el-row>
          </div>
        </template>
        <template v-if="1 != this.$route.params.state">
          <table>
            <tr>
              <td class="text">处理人</td>
              <td class="content"><span>{{this.dataForm.handleUser}}</span></td>
            </tr>
            <tr>
              <td class="text">处理备注</td>
              <!-- <input type="text" ref="remark"> -->
              <el-input
                placeholder="请输入内容"
                v-model="input2"
                ref="input2"
                :disabled="isSure"
              >
              </el-input>
            </tr>
            <tr>
              <td class="text">处理时间</td>
              <td class="content"><span>{{this.dataForm.handelTime}}</span></td>
            </tr>
          </table>
          <div class="divBtn">
            <el-row>
              <el-button type="primary" @click="revise" v-if="beizhu"
                >修改处理备注</el-button
              >
              <el-button
                type="primary"
                @click="confirmModification"
                v-if="queren"
                >确认修改备注</el-button
              >
            </el-row>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "OrderRefundPending",
  data() {
    return {
      input1: "",
      input2: "",
      isSure: true,
      beizhu: true,
      queren: false,
      dataForm: [],
    };
  },
  created() {
    let id = String(this.$route.params.id);
   
    this.seachDetailsById({ id }).then((data) => {
      console.log("详情：",data);
      // this.input1=data.remarks
      // console.log("this.input1",this.input1);
      this.dataForm = data;
      this.$set(this, "input2", this.dataForm.remarks);
      // Vue.$data = { ...data };
    });
  },
  methods: {
    ...mapActions("order", [
      "seachDetailsById",
      "confirmRefundById",
      "refuseRefundById",
      "updateRefuseById"
    ]),
    //点击确认退款
    ConfirmRefund() {
      let remarks = this.input1; //处理备注
      let refundId = String(this.$route.params.id); //详情订单的Id
      let handlingOpinions = "同意退款";
      this.confirmRefundById({ handlingOpinions, refundId, remarks }).then(
        (data) => {
          console.log(data);
          this.$message({
            message: "同意退款成功",
            type: "success",
          });
        }
      );
    },
    //点击拒绝退款
    refuseRefund() {
      let remarks = this.input1; //处理备注
      let refundId = String(this.$route.params.id); //详情订单的Id
      let handlingOpinions = "拒绝退款";
      console.log(handlingOpinions);
      this.refuseRefundById({ handlingOpinions, refundId, remarks }).then(
        (data) => {
          console.log(data);
          this.$message({
            message: "拒绝退款成功",
            type: "success",
          });
        }
      );
    },
    //修改处理备注
    revise() {
      this.isSure = false;
      this.beizhu = false;
      this.queren = true;
    },
    //确认修改处理备注
    confirmModification() {
      this.beizhu = true;
      this.queren = false;
      this.isSure = true;
      let remarks = this.input2;
      let refundId = String(this.$route.params.id); //详情订单的Id
      this.updateRefuseById({refundId,remarks}).then (data=>{
        console.log(data);
        this.$message({
            message: "修改处理备注成功",
            type: "success",
          });
      })
    },
  },

  computed: {
    whoPay(){
        if(this.dataForm.payType==1){
          return '微信支付'
        }else{
          return '支付宝支付'
        }
    },
  whatType(){
    if(this.dataForm.applyType==1){
      return '仅退款'
    }else{
      return '退款退货'
  } 
  },
}}
</script>

<style scoped>
.connect {
  width: 95%;
  margin: 0 auto;
  margin-top: 30px;
}
.connect > div:first-child {
  height: 40px;
  line-height: 40px;
  background-color: #f2f2f2;
  padding-left: 20px;
  margin-bottom: 20px;
}
header {
  height: 40px;
  position: relative;
  line-height: 40px;
  background-color: #f2f2f2;
}
header p {
  position: absolute;
  font-size: 18px;
  font-weight: 400;
  padding-left: 20px;
}
header span {
  border-left: 6px solid #1cb09a;
  padding-left: 20px;
}
header .btnNews {
  position: absolute;
  top: 6px;
  right: 10px;
  padding: 5px 10px;
  background-color: #1cb09a;
  color: #fff;
  border: none;
}
table {
  width: 100%;
  margin-bottom: 16px;
  border-spacing: 0;
}
table td {
  border: 1px solid #d7d7d7 !important;
  height: 40px;
  /* border-left: 1px solid #d7d7d7 !important; */
}
.content {
  border: none;
}
.el-input.is-disabled .el-input__inner {
  background-color: white;
}
tr span {
  margin-left: 20px;
}
/* tr {
  display: block;
  border: 1px solid red;
} */
.text {
  width: 20%;
  background-color: rgba(28, 176, 154, 0.05);
  text-align: center;
}
::v-deep .el-input__inner {
  background-color: white !important;
  border-radius: 0;
}
.divBtn {
  text-align: center;
  margin-top: 50px;
}
.divBtn button {
  display: inline-block;
  padding: 12px 20px;
}
.divBtn button span {
  display: inline-block;
  width: 56px;
  height: 14px;
}
</style>